<!-- 财务收银台 -->
<template>
  <div class="cashier">
    <div class="cashier-content" :class="isDetail ? '' : 'flex-content'">
      <div :class="isDetail ? 'owner-box' : 'cashier-box'">
        <div class="cashier-title">
          收银台
          <a-button v-if="isDetail" @click.stop="goHome">
            <template #icon>
              <LeftOutlined />
            </template>
            返回首页
          </a-button>
        </div>
        <div v-if="!isDetail" class="cashier-action">
          <a-row :gutter="[24, 24]" :wrap="true">
            <a-col :span="24">
              <a-radio-group
                v-model:value="searchType"
                size="large"
                @change="changeSearchType('type')"
              >
                <a-radio-button value="house">
                  <div class="radio-item">
                    {{ $L("房源") }}
                    <TextTip
                      v-if="villageType !== 'village'"
                      tips="仅搜索展示合同数>0的房间。"
                    />
                  </div>
                </a-radio-button>
                <a-radio-button value="tenant">
                  <div class="radio-item">
                    业户
                  </div>
                </a-radio-button>
                <a-radio-button value="Parkingfee">
                  <div class="radio-item">
                    {{ $L("停车费") }}
                  </div>
                </a-radio-button>
              </a-radio-group>
            </a-col>
            <a-col :span="24">
              <a-input-group compact :style="{ display: 'flex' }">
                <a-select
                  ref="select"
                  v-model:value="searchValueType"
                  class="search-select"
                  @change="changeSearchType"
                  size="large"
                >
                  <a-select-option
                    v-for="(item, index) in selectOptions"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.title }}
                  </a-select-option>
                </a-select>
                <a-input-search
                  ref="searchInput"
                  size="large"
                  v-model:value="searchValue"
                  :placeholder="
                    selectOptions.filter((v) => v.value === searchValueType)[0]
                      .placeholder
                  "
                  :allowClear="true"
                  enter-button
                  @search="goSearch"
                  :loading="loading"
                />
              </a-input-group>
            </a-col>

            <a-col :span="24" v-if="loading || isSearch">
              <a-list
                v-if="searchType != 'Parkingfee'"
                :data-source="filterList"
                :loading="loading"
                :split="false"
                class="list-select-box"
                rowKey="id"
              >
                <template #renderItem="{ item, index }">
                  <a-list-item
                    @click="() => handleClick(item, index)"
                    class="list-box"
                  >
                    <span
                      :class="
                        item.is_room
                          ? 'list-box-name'
                          : 'list-box-name owner-name'
                      "
                      >{{
                        item.is_room
                          ? `${item.village_name}/${item.build_name}/${item.layer_name}/${item.room_name}`
                          : item.name
                      }}</span
                    >
                    <cu-icon
                      v-if="item?.owner_list?.length && !item.showSub"
                      class="icon"
                      type="org-xiangyou1"
                    />
                    <cu-icon
                      v-if="item?.owner_list?.length && item.showSub"
                      class="icon"
                      type="org-xiangxia"
                    />
                  </a-list-item>

                  <a-list
                    v-if="item.showSub"
                    :data-source="item.owner_list"
                    :split="false"
                    class="list-select"
                    rowKey="id"
                  >
                    <template #renderItem="{ item, index }">
                      <a-list-item
                        class="list-box list-box-sub"
                        @click="() => handleClick(item, index)"
                      >
                        <span class="list-box-name owner-name">{{
                          item.name || item.owner_name
                        }}</span>
                      </a-list-item>
                    </template>
                  </a-list>
                </template>
              </a-list>
              <a-list
                v-else-if="searchType == 'Parkingfee' && filterList.length > 0"
                :data-source="filterList"
                :loading="loading"
                :split="false"
                class="list-select-box"
                rowKey="id"
              >
                <template #renderItem="{ item, index }">
                  <a-list-item
                    @click="() => handleClick(item, index)"
                    class="list-box"
                  >
                    <span
                      class="hidnow"
                      :class="item.charge_type == 1 ? 'blocks1' : 'block1'"
                    >
                      {{ item.car_number }}
                    </span>
                    <span
                      class="hidnow"
                      :class="item.charge_type == 1 ? 'blocks2' : 'block2'"
                    >
                      {{ item.park_name }} - {{ item.charge_type_txt }}
                    </span>
                    <span
                      class="hidnow"
                      :class="item.charge_type == 1 ? 'blocks3' : 'block3'"
                    >
                      <span
                        v-if="
                          (item.charge_type == 1 || item.charge_type == 3) &&
                          item.enable_time
                        "
                      >
                        {{ item.enable_time }} ~ {{ item.overdue_time }}
                      </span>
                    </span>
                  </a-list-item>
                </template>
              </a-list>
              <div v-if="searchType == 'Parkingfee' && addcar" class="enteres">
                <a-button type="primary" @click="parkeds"
                  >车辆不存在，录入？</a-button
                >
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <!--  租客明细组件  -->
      <OwnerCheckStand v-if="isDetails" :ownerId="ownerId" />

      <ownerpark v-if="park" :items="items" />
    </div>

    <!-- 停车页面 -->
    <div v-if="showMicroPages">
      <micro-app-org
        v-if="showMicroPages"
        router-mode="state"
        style="height: 100%"
        :name="currentAppName"
        :url="
          isProduction
            ? `${locationUrl}/micro_apps/workPark/`
            : devHttpMap[currentAppName]
        "
        :default-page="`#${defaultPageData[currentAppName]}`"
        :data="getAppToChildData"
        @datachange="handleComponentsChange"
      ></micro-app-org>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  computed,
  toRefs,
  reactive,
  watch,
  onMounted,
  nextTick
} from "vue";

import { LeftOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import utils from "../../../common/utils/utils";
import { useRouter } from "vue-router";
import { TextTip } from "bl-common-vue3";
import OwnerCheckStand from "@/views/bill/CashierDesk/modules/ownerCheckStand.vue";
import ownerpark from "@/views/bill/CashierDesk/modules/ownerpark.vue";
import BLCOMMON from "bl-common-vue3";
import _ from "lodash";
// import MicroApps from "@/components/MicroApps/index.vue";
import { getAppMenu } from "@/router/generate_route";
import store from "@/store";
import microApp from "@micro-zoe/micro-app";

export default defineComponent({
  name: "billCashierList",
  components: {
    LeftOutlined,
    TextTip,
    OwnerCheckStand,
    ownerpark,
    // MicroApps,
  },
  setup() {
    const $router = useRouter();
    const state = reactive({
      searchType: "house",
      searchValue: "",
      filterList: [], // 搜索结果
      searchValueType: "room_alias_id",
      loading: false,
      ownerId: 0,
      isSearch: false,
      searchInput: null,
      // 是搜索出来的明细
      isDetail: false,
      isDetails: false,
      park: false,
      addcar: false,
      items: {},

      // 展示应用页面
      showMicroPages: false,
      currentAppName: "",
      currentAlias: "",
      loadedAppMenu: [],
      currentAppComponent: "",
      car_number: "",
      getAppToChildData: {},
    });
    const villageType = computed(() => store.getters.buildingInfo.villageType);
    // 搜索的options
    const selectOptions = computed(() => {
      console.log(state.searchType);
      if (state.searchType === "house") {
        return [
          {
            title: BLCOMMON.utils.L("房源") + "编号",
            value: "room_alias_id",
            placeholder: `请输入${BLCOMMON.utils.L("房源")}编号搜索`,
          },
          {
            title: "房号",
            value: "keywords_1",
            placeholder: "请输入房间号搜索",
          },
        ];
      }

      if (state.searchType === "tenant") {
        return [
          {
            title: "手机号",
            value: "phone",
            placeholder: "请输入完整的手机号检索",
          },
          {
            title: BLCOMMON.utils.L("租客") + "名",
            value: "name",
            placeholder: "请输入姓名搜索",
          },
        ];
      }

      if (state.searchType === "Parkingfee") {
        return [
          {
            title: "车牌号",
            value: "plateNumber",
            placeholder: "请输入完整车牌号或车牌号后4位搜索",
          },
          {
            title: BLCOMMON.utils.L("车主") + "姓名",
            value: "OwnersName",
            placeholder: "请输入车主姓名搜索",
          },
          {
            title: BLCOMMON.utils.L("车主") + "手机号",
            value: "CarOwnersPhoneName",
            placeholder: "请输入完整的车主手机号搜索",
          },
        ];
      }
    });

    watch(
      () => state.searchValue,
      (val) => {
        if (!val) {
          state.isSearch = false;
        }
      }
    );

    let currentValue = "";
    let currentForm = "";
    const getSearchList = (value, requestUrl, searchForm) => {
      currentValue = value;
      currentForm = searchForm;
      state.loading = true;
      // 搜素请求
      const searchList = () => {
        request
          .get(requestUrl.server, requestUrl.url, requestUrl.params)
          .then((res) => {
            let resultList = res?.list || [];
            if (currentValue === value && currentForm === searchForm) {
              state.loading = false;
              if (["room_alias_id", "keywords_1"].includes(searchForm)) {
                state.filterList = resultList.map((v) => {
                  v.is_room = true;
                  return v;
                });
              } else {
                state.filterList = resultList;
              }
              if (state.filterList.length == 0) {
                state.addcar = true;
              } else {
                state.addcar = false;
              }
            }
          });
      };
      searchList();
    };

    const goSearch = () => {
      state.isSearch = true;
      state.filterList = [];
      if (state.searchValue) {
        let requestUrl = {};
        let searchForm = "";
        if (state.searchType === "house") {
          // 房屋 ---- 搜索房间号
          requestUrl = {
            server: "/village",
            url: "/houseResource/resourceList",
            params: {},
          };
          if (state.searchValueType === "room_alias_id") {
            // 房间 ---- 搜索编号
            requestUrl.params = {
              room_alias_id: state.searchValue,
            };
            if (villageType.value !== "village") {
              requestUrl.params.contract = 1;
            }
          } else {
            // 房间 ---- 搜索房间号
            requestUrl.params = {
              keywords_1: state.searchValue,
            };
            if (villageType.value !== "village") {
              requestUrl.params.contract = 1;
            }
          }
        } else if (state.searchType === "tenant") {
          requestUrl = {
            server: "/org",
            url: "/bill/ownerSearchList",
            params: {},
          };
          // 租客 ---- 搜索
          if (state.searchValueType === "phone") {
            // 租客 ---- 搜索手机号
            requestUrl.params = {
              phone: state.searchValue,
            };
          } else {
            // 租客 ---- 搜索租客名称
            requestUrl.params = {
              name: state.searchValue,
            };
          }
        } else if (state.searchType === "Parkingfee") {
          requestUrl = {
            server: "/work_park",
            url: "/car/carInfoSearch",
            params: {},
          };
          // 停车费 ---- 搜索
          if (state.searchValueType === "plateNumber") {
            // 停车费 ---- 搜索车牌号
            requestUrl.params = {
              type: "1",
              word: state.searchValue,
            };
          } else if (state.searchValueType === "OwnersName") {
            // 停车费 ---- 搜索车主名称
            requestUrl.params = {
              type: "2",
              word: state.searchValue,
            };
          } else if (state.searchValueType === "CarOwnersPhoneName") {
            // 停车费 ---- 搜索车主手机号
            requestUrl.params = {
              type: "3",
              word: state.searchValue,
            };
          }
        }
        searchForm = _.cloneDeep(state.searchValueType);
        getSearchList(state.searchValue, requestUrl, searchForm);
      }
    };

    const handleClick = (item) => {
      if (state.searchType !== "Parkingfee") {
        if (item.is_room) {
          if (item?.owner_list?.length) {
            item.showSub = !item.showSub;
          }
        } else {
          state.ownerId = item.id;
          state.isDetail = true;
          state.isDetails = true;
        }
      } else {
        state.items = item;
        state.isDetail = true;
        state.park = true;
      }
    };

    const goHome = () => {
      state.isDetail = false;
      state.isDetails = false;
      state.park = false;
      state.ownerId = 0;
      state.items = "";
    };

    const parkeds = () => {
      state.currentAppName = "addPark";
      state.getAppToChildData = utils.getAppToChildData({
        propsInfo: {
          currentParams: {
            type: 1,
            editId: 0,
            car_number: state.car_number,
            editCarVisible: true
          },
        },
      });
      state.showMicroPages = true;
    };

      // 监听子应用弹框关闭后的回调
      const handleComponentsChange = (e) => {
      const data = e?.detail?.data;
      if (data.type == "close") {
        nextTick(() => {
          state.currentAppName = "";
          state.showMicroPages = false;
        });
      }
      if (data.type == "success") {
        nextTick(() => {
          state.currentAppName = "";
          state.showMicroPages = false;

        });
      }
      state.getAppToChildData = {};
      microApp.unmountApp("addPark", {
        destroy: true,
        clearAliveState: true,
      });
    };

    const locationUrl = location.origin;

    const devHttpMap = {
      addPark: "http://localhost:4007/",
    };

    const defaultPageData = {
      addPark: "/microPage/index",
    };

    const isProduction = !utils.isEnv();

    const getFocus = () => {
      setTimeout(() => {
        state.searchInput.focus();
      }, 0);
    };

    const changeSearchType = (val) => {
      if (val === "type") {
        state.searchValueType = selectOptions.value[0].value;
      }
      state.searchValue = "";
      state.filterList = [];
      getFocus();
    };

    onMounted(() => {
      getFocus();
    });

    return {
      ...toRefs(state),
      selectOptions,
      villageType,
      goSearch,
      handleClick,
      goHome,
      changeSearchType,
      parkeds,
      devHttpMap,
      locationUrl,
      defaultPageData,
      isProduction,
      handleComponentsChange
    };
  },
});
</script>

<style lang="less" scoped>
.cashier {
  padding: 10px;
  position: relative;
  min-height: 100%;
  &-content {
    width: 100%;
  }
}
.flex-content {
  display: flex;
  height: calc(100vh - 20px);
  background-color: #fff;
  justify-content: center;
  align-items: center;
}
.cashier-box {
  width: 600px;
  height: 540px;
  padding: 0 24px;
  //position: relative;
}

.cashier-title {
  width: fit-content;
  height: fit-content;
  font-size: 40px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -270px);
  right: 0;
  bottom: 0;
  transition: top 0.2s ease, left 0.3s ease;
}
.owner-box {
  height: 70px;
  width: 100%;
  background-color: #fff;
}
.owner-box .cashier-title {
  top: 10px;
  left: 20px;
  transform: translate(0, 0);
  transition: top 0.1s ease, left 0.2s ease;
}
.cashier-action {
  margin-top: 110px;
}
.radio-item {
  width: 80px;
  text-align: center;
}

.list-select-box {
  height: 300px;
  border: 1px solid #d9d9d9;
  padding: 6px 10px;
  overflow-y: auto;
  border-radius: 4px;
}

/* 美化滚动条 */
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
.list-select-box::-webkit-scrollbar {
  width: 5px;
}
/*定义滚动条轨道圆角*/
.list-select-box::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f7f7f7;
}
/*定义滑块 内阴影+圆角*/
.list-select-box::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #dddee0;
}

.list-box {
  display: flex;
  cursor: pointer;
  padding: 4px 0;
  height: 34px;
  line-height: 34px;
  .list-box-name {
    display: inline-block;
    flex: 1;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  &:hover {
    color: #1890ff;
  }
}
.list-box-sub {
  margin-left: 24px;
}
.owner-name {
  padding-left: 6px;
  &:hover {
    background-color: #e6f7ff;
  }
}
:deep(.ant-input-search) {
  border-radius: 0;
}
:deep(.ant-select-selection-item) {
  font-size: 14px;
}
.search-select {
  :deep(.ant-select-selector) {
    width: 110px !important;
  }
}
.enteres {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.hidnow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  font-size: 14px;
}
.block1 {
  width: 20%;
}
.blocks1 {
  width: 20%;
  color: #2681f3;
}
.block2 {
  width: 35%;
}
.blocks2 {
  width: 35%;
  color: #2681f3;
}
.block3 {
  width: 45%;
}
.blocks3 {
  width: 45%;
  color: #2681f3;
}
</style>
